<script setup lang="ts">
import {
  CustomerServiceOutlined,
  FileTextOutlined,
} from '@ant-design/icons-vue';

function handleClick() {
  // console.log('click');
  open(
    'https://scn8p8fy52tg.feishu.cn/wiki/Pa8VwzHiui4XTEk4AsBcgo9Anxg?from=from_copylink',
  );
}
</script>

<template>
  <div>
    <a-float-button :style="{ right: '24px', bottom: '114px' }" type="primary">
      <template #icon>
        <CustomerServiceOutlined />
      </template>
      <template #tooltip>
        <div class="flex items-center justify-center">
          <div class="mt-4 flex flex-col items-center justify-center">
            <div class="mb-4 text-center text-xl text-white">
              如遇问题联系客服解决
            </div>
            <img
              alt=""
              src="https://wtplug.oss-cn-hangzhou.aliyuncs.com/webimages/code/WechatIMG6.jpg?time=1734862881024"
              style="width: 180px"
            />
          </div>
        </div>
      </template>
    </a-float-button>
    <a-float-button
      :style="{ right: '24px', bottom: '64px' }"
      description="教程"
      @click="handleClick"
    >
      <template #icon> <FileTextOutlined /> </template>
    </a-float-button>
  </div>
</template>
<style lang="scss" scoped>
.buterks {
  position: fixed;
  right: 0;
  bottom: 0;
  z-index: 124;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  font-size: 30px;
  color: #000;
  background-color: #fff;
}
</style>
